<template>
<div class="fluid field myfield">
  <label for="">{{field.title}}</label>
  <script id="editor" :name="field.name" type="text/plain"></script>

</div>
</template>

<script type="text/ecmascript-6">
const UE = require('UE'); // eslint-disable-line
export default {
  data() {
    return {
      editor: null,
      interval: null,
      val: ''
    }
  },
  props: ['field'],
  watch: {
    // val_now: function(val, old) {
    //   //        tool.cl(val, old)
    //   if (val != old) {
    //     this.val = val
    //   }
    // },
    val: function(val, old) {
      //        tool.cl(val, old)
      if (val != old) {
        this.$emit('setVo', this.field.name, val)
      }
    }
  },
  methods: {
    geteditor() {
      console.log(this.editor.getContent());
      if (this.editor)
        this.val = this.editor.getContent()

    },
  },
  computed: {
    val_now() {
      if (this.editor)
        return this.editor.getContent()
      else
        return ''
    }
  },
  mounted() {
    this.editor = UE.getEditor('editor');
    if (this.editor && this.val)
      this.editor.setContent(this.val)

    this.interval = setInterval(() => {
      if (this.editor)
        this.geteditor();
    }, 200);
  },
  created() {
    this.val = this.$store.state.global.editVo[this.field.name] || this.field.def
  },
  destroyed() {
    clearInterval(this.interval)
    if (this.editor)
      this.editor.destroy();

  },
};
</script>

<style scoped>
.edui-default {}
</style>
